<template>
    <div style="width: 100px; margin: 0 auto" ref="currentDiv" @click="showDrawer()">
        <div class="startClass" ref="childRef" style="text-align: center; font-weight: bold; line-height: 30px">
            <span class="spanClass">开始</span>
        </div>
    </div>
    <div style="height: 30px"></div>


    <component v-if="this.jsonInfo.next && this.jsonInfo.next !== null" :is="this.jsonInfo.next['type']" :jsonInfo="this.jsonInfo.next" :ref="'commonChildRef'"
               :beforeNode="this.jsonInfo" :beforeNodeStartX="realBottomX" :beforeNodeStartY="realBottomY" :globalJson="globalJson"></component>

    <el-drawer v-model="drawerFlag" :with-header="false" :close-on-click-modal="false" :lock-scroll="true">
        <YwuStartNodeDrawer :properties="jsonInfo.properties"/>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelUpdate()">取消</el-button>
                <el-button type="primary" @click="confirmUpdate()">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script>
import YwuStartNodeDrawer from "@/views/bpmn/flow/drawer/YwuStartNodeDrawer";
import emitter from "@/utils/mitt";

export default {
    name: "YwuStartNode",
    props: ["jsonInfo", "globalJson"],
    components: {
        YwuStartNodeDrawer
    },
    data() {
        return {
            currentTopX: 0,
            currentTopY: 0,
            currentBottomX: 0,
            currentBottomY: 0,
            realBottomX: 0,
            realBottomY: 0,
            drawerFlag: false,
            propertiesCopy: {}
        }
    },
    methods: {
        calcXy() {
            let nodeInfo = this.$refs.currentDiv;
            this.currentTopX = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
            this.currentBottomX = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
            this.currentTopY = nodeInfo.offsetTop - 10;
            this.currentBottomY = nodeInfo.offsetTop + nodeInfo.offsetHeight;
            this.realBottomX = this.currentBottomX;
            this.realBottomY = this.currentBottomY;
        },
        showDrawer() {
            // 备份数据
            this.propertiesCopy = {...this.jsonInfo.properties}
            this.drawerFlag = true
        },
        confirmUpdate() {
            this.drawerFlag = false;
        },
        cancelUpdate() {
            this.drawerFlag = false;
            // 还原数据
            this.jsonInfo.properties = {...this.propertiesCopy};
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.calcXy();
        });
        // 在组件挂载时添加窗口大小改变的监听器
        window.addEventListener('resize', this.calcXy);
        emitter.on('refreshLine', (message) => {
            this.$nextTick(() => {
                this.calcXy();
            });
        });
    },
    beforeDestroy() {
        // 在组件销毁前移除监听器，避免内存泄漏
        window.removeEventListener('resize', this.calcXy);
    }
}
</script>

<style scoped lang="less">
.startClass {
    width: 100px;
    height: 30px;
    border-radius: 10px;
    background-color: rgba(98, 245, 233, 0.43);
}

.startClass:hover {
    cursor: pointer;
}
</style>